<template>
    <div>
        <!-- 监听属性 -->
        <button @click="counter--">点我++</button><br>

        <!-- 翻转 -->
        {{reverse_msg}}
        <br>
        <!-- 绑定样式 -->
        <div :class="{active:isactive}">绑定样式</div><br>
        <!-- 遍历展示 -->
        <ul>
            <li v-for="(item, index) in tlist" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                {{item.text}}
            </li>
        </ul>
        <!-- 分支显示 -->
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else>
            C
        </div>

        <p v-show="ok">《我看到你了！》</p></p>
        {{ msg }}
        
    </div>
</template>

<script>
export default {
    name:'test',
    data() {
        return {
            msg:'你好，今天复习VUE知识',
            ok:true,
            type:'B',
            tlist:[{test:"汽车",price:10},{text:'手机'},{text:'电脑'},{text:'食品'}],
            isactive:false,
            counter:0,

        }
    },
    methods: {
        
    },
    watch: {
        counter(oldval,newval){
            console.log("计数器变化从old变成new："+"["+ oldval + "," + newval + ']')
        }
    },
    computed: {
        reverse_msg(){
            return '$'+this.msg.split('').reverse().join('');
        }
    },

}
</script>


<style>
    .on{background-color: blue;}
    .off{background-color: yellowgreen;}
    .active{
        background-color: red;
        width: 500px;
        height: 300px;
    }
</style>